const canvas = document.createElement('canvas');
canvas.width = window.innerWidth ;
canvas.height = window.innerHeight ;
document.body.append(canvas);
const ctx = canvas.getContext('2d');

//[min,max]
function randomNumber(min,max){
    return Math.random() * (max - min + 1) + min ;
}


//反转y轴
ctx.translate(0,canvas.height);
ctx.scale(1,-1);

//一个烟花在升空的过程中，暂时是一个圆的移动，小圆不断变大，最终爆炸，有一个移动速度最终决定爆炸时的高度
class Fireworks{
    constructor(x,y,r,opacity){
        this.x = x ;
        this.y = y;//Math.random()*5; //在0-5之间寻找位置开始升空
        this.r = r||6 ;
        this.opacity = 2 ;
        this.balls = [] ;
        this.ballOpactiry = 1 ;
    }
    draw(){
        this.opacity = this.opacity < 0.05?0.05:this.opacity ;
        for(let i=0;i<500;i++){
            const particle = new Particle(this.x , this.y-2*i,this.r-0.1*i,`rgba(222,200,50,${this.opacity-i*0.01})`);       
            particle.draw();
        }
    }
    bomb(){
        if(this.balls.length == 0){
            //刚开始爆炸，生成小球
            const num = 300 ;
            for(let i=0;i<num;i++){
                const color = `rgba(${randomNumber(0,255)},${randomNumber(0,255)},${randomNumber(0,255)},${this.ballOpactiry})`
                //const color = `hsl(${randomNumber(0,360)},50%,80%)`
                const hd = Math.PI * 2 / num ;
                const dirx = Math.cos(hd*i) * randomNumber(0,3);
                const diry = Math.sin(hd*i) * randomNumber(0,3);
                const ball = new Ball(this.x,this.y,dirx,diry,color,i%2==0);
                this.balls.push(ball);
                ball.draw();
            }
        }else{
            //已经爆炸，修改小球位置
            this.balls.forEach((e,i)=>{
                e.update();
            });
        }
        this.opacity -= 0.01 ;
    }
}

class Ball{
    constructor(x,y,dirx,diry,color,type){
        this.x = x ;
        this.y = y ;
        this.dirx = dirx ;
        this.diry = diry ;
        this.r = 2 ;
        this.color = color ;
        this.type = type ;
    }
    draw(){
        
            ctx.beginPath();
            ctx.save();
            ctx.fillStyle = this.color ;
            ctx.arc(this.x ,this.y,this.r,0,Math.PI*2) ;
            ctx.fill();
            ctx.restore();

    }
    update(){   
        this.dirx *=0.99 ;
        this.diry *=0.99 ;
        this.diry -=0.01 ;
        this.x += this.dirx ;
        this.y += this.diry ;
        this.draw();
    }
}

class Particle{
    constructor(x , y , r,color){
        this.x = x ;
        this.y = y ;
        this.r = r<0?0:r ;
        this.color = color ;
    }
    draw(){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = this.color ;
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
        ctx.fill();
        ctx.restore();
    }
}

//绘制一个烟花， 逐步上升
const fireworksArray = [] ;
const bombs = [] ;
let sum = 0 ;
let e ;
(function up(){
    if(!e || e.opacity <= 0.1){
        ctx.clearRect(0,0,canvas.width , canvas.height) ;
        const x = Math.random() * canvas.width / 2 + canvas.width / 4 ;
        e= new Fireworks(x,500);
    }

    e.bomb();

    requestAnimationFrame(up);

    // (function temp(){
    //     fireworksArray[0].bomb();
    //     requestAnimationFrame(temp);
    // })();

})();
